<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />

  <title>single</title>

<style>
body {
  min-height: 1000px;
}

.box {
  width: 100px;
  height: 100px;
  background: #19F;
}

.box.is-dragging {
  opacity: 0.6;
}
#grid-container {
  width: 340px;
  height: 210px;
  position: absolute;
  left: 400px;
  top: 300px;
  border: 1px solid;
}
</style>

</head>
<body>

  <h1>single</h1>
<div id="grid-container">
  <div class="box"></div>
</div>


<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/unipointer/unipointer.js"></script>
<script src="../bower_components/unidragger/unidragger.js"></script>
<script src="../draggabilly.js"></script>

<script>
var draggie = new Draggabilly( '#grid-container .box', {
  containment: true,
});

draggie.on( 'dragStart', function( event, pointer ) {
  console.log('dragStart', this.position.x, this.position.y, event.type, pointer.pageX, pointer.pageY );
});

draggie.on( 'staticClick', function( event, pointer ) {
  console.log( 'staticClick', event.type );
});

draggie.on( 'dragMove', function( event, pointer ) {
  // console.log(pointer);
  console.log('dragMove', this.position.x, this.position.y, event.type, pointer.clientX, pointer.clientY );
});

draggie.on( 'dragEnd', function( event, pointer ) {
  console.log( 'dragEnd', this.position.x, this.position.y, event && event.type, pointer && pointer.pageX, pointer && pointer.pageY );
});

// var _onscroll = draggie.onscroll;
// var h1 = document.querySelector('h1');
// draggie.onscroll = function() {
//   h1.textContent = window.pageYOffset;
//   _onscroll.apply( this, arguments );
// }
</script>

</body>
</html>
